<template>
	<view class="sell-contanier">
		<!-- tab栏 -->
		<view class="sell-tabs">
			<u-tabs :list="tabs" :scrollable="false" :current="curTabIndex.index" lineColor="#01ab36"
				@click="onChangeTab">
			</u-tabs>
		</view>
		<view class="sell-list" v-if="list.length">
			<view class="item-order-content" v-for="(v,i) in list" :key="i">
				<view class="head flex-sb">
					<view class="text-number">订单编号<text class="number">{{v.orderRefundNo}}</text></view>
					<view class="state">{{statusText[v.status]}}</view>
				</view>
				<view class="list-content">
					<unt-goods-detail :data="[v.orderGoods]" modal="refund"></unt-goods-detail>
					<view class="refund-modal">
						<view class="modal-title">售后状态</view>
						<view class="modal-desc">
							订单{{statusText[v.status]}}
						</view>
					</view>
				</view>
				<view class="btn-list flex-end">
					<view class="btn delete" v-if="v.status!=20&&v.status!=30" @click="revokeRefund(v,40)">撤销申请</view>
					<view class="btn delete" v-if="v.status==30" @click="revokeRefund(v,40)">删除记录</view>
					<view class="btn sea" @click="refundView(v)">查看详情</view>
				</view>
			</view>
		</view>
		<!-- 空列表 -->
		<view class="empty-order" v-else>
			<u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
			</u-empty>
		</view>
		<!--  -->
	</view>
</template>

<script>
	import * as Sell from '@/api/sell/index.js'
	// tab栏数据
	const tabs = [{
		name: `全部`,
		value: ''
	}, {
		name: `处理中`,
		value: '0'
	}, {
		name: `已完成`,
		value: '20'
	}];
	export default {
		data() {
			return {
				isLoading: false,
				// tab栏数据
				tabs,
				// 当前标签索引
				curTabIndex: {
					index: 0,
					value: ''
				},
				list: [],
				page: {
					size: 10,
					num: 1
				},
				statusText:{0:'进行中',10:'已拒绝',20:'已完成',30:'已取消'},
			};
		},
		onShow() {
			this.getPageData();
		},
		methods: {
			refundView(v){
				this.$unts.navTo("pages_order/refundView/refundView", {
					id: v.orderRefundId
				})
			},
			onChangeTab(e) {
				// 设置当前选中的标签
				this.curTabIndex = e;
				this.getPageData();
			},
			getPageData() {
				this.isLoading = false;
				const page = this.page;
				Sell.list({
					status: this.curTabIndex.value,
					pageSize: page.size,
					pageNum: page.num
				}).then(res => {
					this.list = res.data.records;
					this.isLoading = true;
				})
			},
			// 撤销申请
			revokeRefund(v,num){
				const app=this;
				uni.showModal({
				    title: '提示',
				    content:num==30?'确认要撤销售后申请吗？':'确认要删除此售后记录吗？',
				    success: function (res) {
				        if (res.confirm) {
				            Sell.revoke({
				            	orderRefundId:v.orderRefundId,
				            	status:num,
				            }).then(res => {
				            	app.getPageData();
				            })
				        }
				    }
				});
			}
		},
		onReachBottom() {
			this.page.size += 10;
			this.getPageData();
		}
	}
</script>
<style>
	page {
		background: #F0F0F0;
	}
</style>
<style lang="scss" scoped>
	.sell-contanier {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;

		.sell-tabs {
			width: 100%;
			padding-bottom: 20rpx;
			background: #fff;
		}

		.sell-list {
			width: 100%;
			padding: 20rpx;
			height: 100vh;
			overflow-y: auto;

			.item-order-content {
				margin-bottom: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.head {
					padding-bottom: 20rpx;
					border-bottom: 1px solid #f0f0f4;

					.text-number {
						font-size: 24rpx;

						.number {
							margin-left: 20rpx;
						}
					}

					.state {
						font-size: 28rpx;
						color: #f36838;
					}
				}

				.list-content {
					margin: 25rpx 0px;

					.refund-modal {
						display: flex;
						padding: 20rpx 40rpx;
						border-radius: 10rpx;
						margin-top: 10rpx;
						background-color: #F7F7F7;

						.modal-title {
							font-weight: bold;
							font-size: 28rpx;
							margin-right: 30rpx;
						}

						.modal-desc {
							font-size: 28rpx;
						}
					}
				}

				.btn-list {
					.btn {
						border-radius: 150rpx;
						padding: 10rpx 30rpx;
						font-size: 28rpx;
						margin-left: 20rpx;
						border: 1px solid #000;
					}
					.sea {
						border: 1px solid #FE5E33;
						color: #FE5E33;
					}
				}

			}
		}
	}
</style>